import './header.css'
import { Button,Form, Input, Modal,message } from 'antd'
import { NavLink } from 'react-router-dom'
import { getStorage } from '../utils/utils'
import { useHistory } from "react-router-dom";
import { useState } from 'react'
import axios from '../utils/http'

const layout = {
    labelCol: {
      span: 6,
    },
    wrapperCol: {
      span: 16,
    },
  };

export const Header = () => {
    const history = useHistory();
    const [visible,setVisible] = useState(false)

    const [pwd,setPwd] = useState({oldPwd: '',newPwd: '',againPwd: ''})

    let User = getStorage('user')
    let getUser = () => {
        if (User) {
            return (
                <div className='userMessage'>
                    <img className='headImg2' alt='' src={'http://localhost:8888' + getStorage('user').HeadImg} />
                    <p className='userName'>{User.UserName}</p>
                    <p className='iconfont icon-down-copy-copy'></p>
                </div>
            )
        } else {
            return (
                <Button onClick={() => userLogin()}>登录</Button>
            )
        }
    }
    let userLogin = () => {
        history.push('/Login')
    }
    let outLogin = () => {
        history.push('/Login')
        sessionStorage.removeItem('user')
        sessionStorage.removeItem('token')
    }

    const successPrompt = (val) => {
        message.success(val);
    };
    const errorPrompt = (val) => {
        message.error(val);
    };

    let handleOk = () => {
        console.log(pwd)
        if(pwd.oldPwd === ''){
            errorPrompt('请输入原密码')
        }else if(pwd.newPwd === ''){
            errorPrompt('请输入新密码')
        }else if(pwd.againPwd === ''){
            errorPrompt('请再次输入密码')
        }else if(pwd.newPwd !== pwd.againPwd){
            errorPrompt('两次输入的密码不同')
        }else{
            axios({
                url: '/changePwd',
                method: 'post',
                data: {userid: getStorage('user').Userid,oldPassword: pwd.oldPwd,newPassword: pwd.newPwd}
            }).then(data => {
                if(data.data.code === 200){
                    successPrompt(data.data.message)
                    setVisible(false)
                    outLogin()
                }else{
                    errorPrompt(data.data.message)
                }
                console.log(data)
            })
        }
    };
    let handleCancel = () => {
        setVisible(false)
    };

    let ModifyPwd = () => {
        let newPwd = {oldPwd: '',newPwd: '',againPwd: ''}
        setPwd(newPwd)
        setVisible(true)
    }

    let changePwd = (e,type) => {
        let newPwd = JSON.parse(JSON.stringify(pwd))
        newPwd[type] = e.target.value
        setPwd(newPwd)
    }

    let gotoPersonal = () => {
        history.push('/TotalEntry/PersonalCenter')
    }

    return (
        <div className='header'>
            <img className='logo' alt='' src='./images/Logo.png'></img>
            <div className='Navlist'>
                <ul>
                    <li><NavLink to='/TotalEntry/Index'>首页</NavLink></li>
                    <li><NavLink to='/TotalEntry/Classification'>分类</NavLink></li>
                    <li><NavLink to='/TotalEntry/BookRanking'>排行</NavLink></li>
                </ul>
            </div>
            <div className='userAction'>
                {getUser()}
                {
                    getStorage('user') ? (<div className='actions'>
                        <p onClick={() => gotoPersonal()}>个人中心</p>
                        <p onClick={() => ModifyPwd()}>修改密码</p>
                        <p onClick={() => outLogin()}>退出登录</p>
                    </div>) : (<></>)
                }

            </div>

            <Modal
                visible={visible}
                title="修改密码"
                onOk={handleOk}
                onCancel={handleCancel}
                footer={[
                    <Button key="cancel" type="primary" onClick={() => handleCancel()}>取消</Button>,
                    <Button key="save" type="primary" onClick={() => handleOk()}>确定修改</Button>
                ]}
            >
                <Form {...layout} name="basic" >
                    <Form.Item label="原密码">
                        <Input.Password value={pwd.oldPwd} onChange={(e) => changePwd(e,'oldPwd')}/>
                    </Form.Item>

                    <Form.Item label="新密码">
                        <Input.Password value={pwd.newPwd} onChange={(e) => changePwd(e,'newPwd')} />
                    </Form.Item>
                    <Form.Item label="再次输入密码">
                        <Input.Password value={pwd.againPwd} onChange={(e) => changePwd(e,'againPwd')} />
                    </Form.Item>
                </Form>
            </Modal>
        </div>
    )
}